<style lang="less">
    @import './validator.less';
</style>

<template>
    <div>
        <Row>
            <Col span="24">
                <!-- <Card>
                    <p slot="title">
                        <Icon type="ios-list"></Icon>
                        校验服务接口
                    </p>
                    <Row type="flex" justify="center" align="middle" class="validator">
                        <Table border :columns="columns" :data="listData" style="width: 100%;"></Table>
                        <Page show-elevator show-total :total="params.totalRow" :current="params.page" :page-size="params.limit" @on-change="handlePage" ></Page>
                    </Row>
                </Card> -->
                <Layout>
                    <Content>
                        <Table border :columns="columns" :data="listData" style="width: 100%;"></Table>
                        <Page show-elevator show-total :total="params.totalRow" :current="params.page" :page-size="params.limit" @on-change="handlePage" class="paging"></Page>
                    </Content>
                </Layout>
            </Col>
        </Row>
    </div>
</template>

<script>
import util from '@/libs/util.js';
export default {
    name: 'my-validator',
    data () {
        return {
            columns: [
               {
                    type: 'index',
                    title: '序号',
                    width: 80
                },
                {
                    title: '标识',
                    key: 'key'
                },
                {
                    title: 'URL',
                    key: 'url'
                },
                {
                    title: '状态',
                    key: 'state'
                },
                {
                    title: '创建日期',
                    key: 'createTime'
                },
                {
                    title: '修改日期',
                    key: 'updateTime'
                },
                {
                    title: '详情',
                    key: 'show_more',
                    align: 'center',
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'text',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    let argu = { key: params.row.key };
                                    this.$router.push({
                                        name: 'api-info',
                                        params: argu
                                    });
                                }
                            }
                        }, '了解详情');
                    }
                }
            ],
            listData: [],
            params: {
                totalRow: 0,
                totalPage: 0,
                page: 1,
                limit: 10
            }
        };
    },
    computed: {
        
    },
    mounted() {        
        this.getData();
    },
    methods: {
        getData(){
            let $this = this;
            // 查询接口列表
            util.ajax.get('/ecloud/api/list/page', {params: $this.params})
                .then(response => {
                    if(response.data.code == 200){
                        $this.listData = response.data.data.list;
                        $this.params.totalPage = response.data.data.totalPage;
                        $this.params.totalRow = response.data.data.totalRow;
                        console.log(response.data.data);
                    }else{
                        console.log(response.data.cause);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        handlePage(value){
            this.params.page = value;
            this.getData();
        }
    }
};
</script>